<template>
  <div id="components-form-demo-advanced-search">
    <!--    搜索区-->
    <a-form class="ant-advanced-search-form" :label-col="{xs: { span: 24 },sm: { span: 5 },}" :form="form" @submit="handleSearch">
      <a-col :md="8" :sm="24">
        <a-form-item label="操作人">
          <a-input v-model="queryParam.operateor" style="width: 200px" placeholder="请输入操作者"/>
        </a-form-item>
      </a-col>

      <a-col :md="8" :sm="24">
        <a-form-item label="关键字">
          <a-input v-model="queryParam.keyword" style="width: 200px" placeholder="请输入关键字"/>
        </a-form-item>
      </a-col>

      <a-col :md="8" :sm="24">
        <a-form-item label="操作类名">
          <a-input v-model="queryParam.operateClassName" style="width: 200px" placeholder="请输入操作类名"/>
        </a-form-item>
      </a-col>

      <template v-if="isShow">
        <a-col :md="8" :sm="24">
          <a-form-item label="操作方法">
            <a-input v-model="queryParam.operateMethodName" style="width: 200px" placeholder="请输入操作方法名"/>
          </a-form-item>
        </a-col>

          <a-col :md="8" :sm="24">
            <a-form-item label="操作类型">
              <a-select v-model="queryParam.operateType" placeholder="请选择" style="width: 200px">
                <a-select-option v-for="opera in logInfo.operateTypeList" :value="opera.operateTypeCode" :key="opera.operateTypeCode">
                  {{opera.operaType}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <a-form-item label="操作结果">
              <a-select v-model="queryParam.operateResult" placeholder="请选择" style="width: 200px">
                <a-select-option v-for="operaResult in logInfo.operateResultList" :value="operaResult.operateResultCode" :key="operaResult.operateResultCode">
                  {{operaResult.operateResult}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <a-form-item label="操作表">
              <a-select
                  mode="multiple"
                  size="default"
                  placeholder="请选择"
                  :default-value="[]"
                  style="width: 200px"
                  v-model="queryParam.operateTables"
              >
                <a-select-option v-for="operaTable in logInfo.tableInfoList" :value="operaTable.tableName" :key="operaTable.tableName">
                  {{operaTable.tableDesc}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

        <a-col :md="8" :sm="24">
          <a-form-item label="开始时间">
            <a-range-picker
                style="width: 100%"
                :show-time="{ format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                @change="dataRangeChange"
            />
          </a-form-item>
        </a-col>
        </template>

      <a-col offset="16" :md="8" :sm="24">
            <span class="table-page-search-submitButtons" style="float: right">
              <a-space>
                <a-button v-if="$store.state.user.loginUser.type === 1" type="danger" @click="clearVisible = true">清理日志</a-button>
                <a-button type="primary" html-type="submit">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              </a-space>
              <a @click="toggle" style="margin-left: 8px">
                {{ isShow ? '收起' : '展开' }}
                <a-icon :type="isShow ? 'up' : 'down'"/>
              </a>
            </span>
      </a-col>
    </a-form>
    <a-modal
        title="清理日志"
        :visible="clearVisible"
        okText="确认"
        okType="danger"
        cancelText="放弃"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-select style="width: 200px" v-model="cleanTime">
        <a-select-option :value="1">
          前一个月
        </a-select-option>
        <a-select-option :value="3">
          前三个月
        </a-select-option>
        <a-select-option :value="6">
          前六个月
        </a-select-option>
      </a-select>
    </a-modal>
    <!--    数据区-->
    <div class="search-result-list">
      <a-table :columns="columns"
               :data-source="pageBean.logsList"
               :scroll="{ x: 1500}"
               bordered
               :pagination="false"
               :loading="isloading"
               rowKey="logId">

<!--        编号-->
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
<!--        分页-->
        <template slot="footer">
          <a-pagination
              style="text-align: end"
              v-model="pageBean.pageNum"
              :page-size-options="['2', '4', '5','10','20']"
              :total="pageBean.total"
              show-size-changer
              :page-size="pageBean.pageSize"
              @showSizeChange="onPageSizeSizeChangeHandler"
              @change="onPageChangeHandler"
          >
            <template slot="buildOptionText" slot-scope="props">
              <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
              <span v-if="props.value === '50'">全部</span>
            </template>
          </a-pagination>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import moment from "moment";
import {clearOperaLog, getLogInfo} from '@/api/logs';
import {DEFAULT_PAGENUM,DEFAULT_PAGESIZE} from "@/constent";
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20, offset: 4 },
};
const initQueryParam = {
  pageNum:DEFAULT_PAGENUM,
  pageSize:DEFAULT_PAGESIZE,
}
export default {
  name: "LogInfo",
  data () {
    return {
      // 清理日志
      clearVisible:false,
      cleanTime:1,
      // 搜索条件是否展开
      isShow:false,
      // 模态框
      // 添加、修改模态框显示与隐藏
      visible:false,
      currentOpera: 1,
      // 查询参数
      queryParam:{
        pageNum:DEFAULT_PAGENUM,
        pageSize:DEFAULT_PAGESIZE,
      },
      // 分页
      // 表格数据
      logList:[],
      pageBean:{
        total:20,
        pageNum:DEFAULT_PAGENUM,
        pageSize:DEFAULT_PAGESIZE,
        logList:[]
      },
      // 是否加载中
      isloading:true,
      //表头
      columns:[
        {
          title: '编号',
          scopedSlots: { customRender: 'serial' },
          width: 80,
          key: 'index',
          fixed: 'left',
          align:'center',
        },
        {
          title: '操作人',
          dataIndex: 'operateor',
          key: 'operateor',
          ellipsis: true,
          width: 100,
          align:'center',
        },
        {
          title: '操作结果',
          key: 'operateResult',
          dataIndex: 'operateResult',
          width: 120,
          align:'center',
          ellipsis: true,
          customRender: (text) => text === "成功" ? <a-tag color="#87d068">{{text}}</a-tag> : text === "失败" ? <a-tag color="#f50">{{text}}</a-tag> : <a-tag color="orange">{{text}}</a-tag>
        },
        {
          title: '操作类型',
          key: 'operateType',
          dataIndex: 'operateType',
          align:'center',
          ellipsis: true,
          width: 120
        },
        {
          title: '操作表',
          key: 'operateTables',
          dataIndex: 'operateTables',
          align:'center',
          ellipsis: true,
          width: 200
        },
        {
          title: '操作类名',
          key: 'operateClassName',
          dataIndex: 'operateClassName',
          width: 300,
          align:'center',
          ellipsis: true,
        },
        {
          title: '操作方法名',
          key: 'operateMethodName',
          dataIndex: 'operateMethodName',
          width: 200,
          align:'center',
          ellipsis: true,
        },
        {
          title: '方法入参',
          key: 'params',
          dataIndex: 'params',
          align:'center',
          ellipsis: true,
          width: 250
        },
        {
          title: '方法返回值',
          key: 'result',
          dataIndex: 'result',
          align:'center',
          ellipsis: true,
          width: 350
        },
        {
          title: '操作描述',
          key: 'operateDesc',
          dataIndex: 'operateDesc',
          align:'center',
          ellipsis: true,
          width: 200
        },
        {
          title: '操作日期',
          key: 'operateDate',
          dataIndex: 'operateDate',
          width: 200,
          align:'center',
          ellipsis: true,
          customRender:text => text === null ? '' : moment(text).format("yyyy-MM-DD HH:mm:ss")
        },
        {
          title: '操作说明',
          key: 'operateWhy',
          dataIndex: 'operateWhy',
          align:'center',
          ellipsis: true,
          width: 150
        },
      ],
      // 展开/收缩 true展开
      expand: false,
      form: this.$form.createForm(this, { name: 'advanced_search' }),
      formItemLayout,
      formTailLayout,
    }
  },
  computed:{
    ...mapState({
      logInfo: state => state.sys.logPreInfo
    })
  },
  watch:{
    // 监视参数变化
    queryParam:{
      immediate:true,
      deep:true,
      handler(){
        this.loadLogList();
      }
    }
  },
  methods:{
    // 确认清理
    handleOk(e) {
      const _this = this;
      this.$confirm({
        title: '清理操作日志',
        content: '此操作无法恢复,请谨慎操作?',
        okText: '确认',
        okType: 'danger',
        cancelText: '放弃',
        onOk() {
          clearOperaLog(_this.cleanTime).then(res => {
            const {code, msg} = res;
            if (code === 200) {
              _this.$message.success(msg);
              _this.clearVisible = false;
              _this.loadLogList();
            } else {
              _this.$message.error(msg);
            }
          }).catch(err => {
            console.log(err);
          })
        },
        onCancel() {
          console.log("取消了删除");
        },
      });
    },
    // 点击了取消
    handleCancel(e) {
      this.clearVisible = false;
      this.cleanTime = 1;
    },
    // 日期范围框改变事件
    dataRangeChange(date, dateStringArr) {
      this.queryParam.operateDate = dateStringArr;
    },
    // 加载日志数据
    async loadLogList(){
      let result = await getLogInfo(this.queryParam);
      if(result.code === 200){
        this.isloading = false;
        this.pageBean = result.data;
      }else {
        this.$message.warn(result.msg);
        this.pageBean = {};
      }
    },

    /**
     * 每页显示条数改变回调
     * @param current
     * @param pageSize
     */
    onPageSizeSizeChangeHandler(current, pageSize) {
      this.queryParam.pageSize = pageSize;
    },

    /**
     * 当前页改变回调
     * @param current
     * @param pageSize
     */
    onPageChangeHandler(current){
      this.queryParam.pageNum = current;
    },

    // 搜索用户回调
    handleSearch(e) {
      e.preventDefault();
      this.loadLogList(this.queryParam);
    },
    // 重置搜索条件
    handleReset() {
      // 重置搜索条件
      this.queryParam = {
        pageNum:this.pageBean.pageNum,
        pageSize:this.pageBean.pageSize
      };
    },
    // 表单收缩/展开
    toggle() {
      this.isShow = !this.isShow;
    },
  }
}
</script>

<style scoped>
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
  width: 100px;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  padding-top: 20px;
}
.opera{
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
